<template>
  <view>
    <!--顶部滑动-->
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="作品团队"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view @click="getContactQQ()">
      <u-notice-bar :autoplay="true" :list="tipList"></u-notice-bar>
    </view>
    <!--顶部项目简介-->
    <view class="header-box">
      <view class="logo">
        <image src="https://nightowl.top/static/images/icons/logo.png"></image>
      </view>
      <view class="name">易搭衣橱</view>
      <view class="description">——一个希望教会你穿搭的论坛</view>
    </view>
    <!--成员介绍-->
    <view class="member-box">
      <view class="member-title">团队成员</view>
      <block v-for="(item, index) in memberList" :key="index">
        <view class="member-info">
          <view class="member-avatar">
            <image :src="item.avatar"></image>
          </view>
          <view class="member-details">
            <view class="member-nickname">{{ item.nickname }}</view>
            <view class="member-introduce">{{ item.introduce }}</view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      tipList: [
        '易搭衣橱小程序部分素材来源于小红书，如有冒犯可以联系管理员撤除哦~',
        '我们尊重原创，如果原作者登录小程序，可以联系管理员修改作者信息，我们会尽快答复~',
      ],
      memberList: [
        {
          avatar:
            'https://thirdwx.qlogo.cn/mmopen/vi_32/K0VfPc7RC7g85cfPo7mg3Nh8dCjiakl4xYFMBXvCWJ4sZtqZxnGQJZADNadOmwbRkUeLoqwvVm655CtRic9ics5Dw/132',
          introduce: 'Bug is the best teacher.',
          nickname: '凌空暗羽',
        },
        {
          avatar:
            'https://thirdwx.qlogo.cn/mmopen/vi_32/U88hZYFaBq45ZytAYeSJYcedc3JlA21tQ611nsWDrk6ReLGPNsPPy5jiaQaNw9RLuTKicFxrOLpIMJFhMJrWa5JA/132',
          introduce: '好好学习，天天向上。',
          nickname: '轩峰',
        },
        {
          avatar:
            'https://thirdwx.qlogo.cn/mmopen/vi_32/Z76rOEszZUic8F0icCUVpCgxEXYk4JU1oBDZpNF81hsFFpOIVur0Ol9T2LIW0fuU6tXxXypia4fbP5bLbmibVfzavg/132',
          introduce: '桃李春风一杯酒，江湖夜雨十年灯。',
          nickname: 'wuli顾七',
        },
        {
          avatar:
            'https://thirdwx.qlogo.cn/mmopen/vi_32/gIFkiccHkgOsDR0ybxdqxF4m6dWh49iaichWrXibhCLibpUBSpQgPBSQQkeIIgFQjDW4qWGBzV4s13pY7ib1lK7kCfAg/132',
          introduce: '处事以诚',
          nickname: '季云',
        },
      ],
    };
  },
  methods: {
    getContactQQ() {
      uni.setClipboardData({
        data: '2889797849',
        success: () => {
          app.showToast('管理员QQ已复制~', 'success');
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}

.logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo image {
  margin-top: 60rpx;
  width: 120rpx;
  height: 120rpx;
  border: 4rpx #f1eaf8 solid;
  border-radius: 50%;
}

.member-box {
  background-color: #fff;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;
  margin-top: 60rpx;
  padding-top: 20rpx;
  padding-bottom: 60rpx;
}

.member-avatar {
  width: 100rpx;
  height: 100rpx;
  margin-right: 40rpx;
}

.member-avatar image {
  width: 100rpx;
  height: 100rpx;
  border: 4rpx #f1eaf8 solid;
  border-radius: 50%;
}

.name {
  color: #e86fb8;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 20rpx;
}

.member-title {
  text-align: center;
  margin-top: 60rpx;
  font-size: 28rpx;
  color: #9393e8;
}

.description {
  text-align: right;
  font-size: 24rpx;
  margin-right: 40rpx;
  margin-top: 20rpx;
  color: #e299a6;
}

.member-info {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0px auto;
  margin-top: 20rpx;
  height: 120rpx;
}

.member-details {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

.member-nickname {
  font-weight: bold;
  color: #9eb9f5;
}

.member-introduce {
  color: #999999;
}
</style>
